<style lang="less" scoped>
    .mycard {
        width: 100%;
        height: auto;
    }
</style>
<template>
    <div class="mycard">
        <Card>
            <div slot="title" style="text-align: left;display: flex;">
                <span style="display: flex;align-items:center;height: 32px;font-weight: 900">{{ cardtitle }}</span>
                <slot name="mycardtitle"></slot>
            </div>
            <a href="#" v-show="showright" slot="extra" @click.prevent="cardrightclick">
                <Icon :type="icon"></Icon>
                {{ cardbtn }}
            </a>
            <slot></slot>
        </Card>
    </div>
</template>
<script>
    export default {
        name: 'mycard',
        props: {
            cardtitle: {
                type: String,
                default: ''
            },
            showright: {
                type: Boolean,
                default: false
            },
            icon: {
                type: String,
                default: ''
            },
            cardbtn: {
                type: String,
                default: ''
            }
        },
        data () {
            return {
            };
        },
        computed: {
        },
        methods: {
            cardrightclick () {
                this.$emit('cardrightclick')
            }
        },
        components: {
        },
        mounted: function () {
        }
    };
</script>
